<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">要展示的指标名称</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            9,054,056
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">要展示的指标名称</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            9,054,056
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">要展示的指标名称</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            9,054,056
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">要展示的指标名称</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            9,054,056
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md7">
            <div id="echarts-bars" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md5">
            <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>


    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div>


</div>
<!--</div>-->
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;

            /*
                柱状图
            */
        // 基于准备好的dom，初始化echarts实例
        var echartsBars = echarts.init(document.getElementById('echarts-bars'), 'walden');

        // 指定图表的配置项和数据
        var optionBars = {
            title: {
                text: '角色男女统计'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.5]//从0开始每个格子占10
            },
            yAxis: {
                type: 'category',
                data: []
            },
            series: [
                {
                    name: '男生',
                    type: 'bar',
                    data: []
                },
                {
                    name: '女生',
                    type: 'bar',
                    data: []
                }
            ]
        };
        //请求后端数据ajax
        $.getJSON("/statistics/findBar", "", function (resultData) {//响应成功的回调函数
            if (resultData.code == 0) {
                var data=resultData.data;
                var rolename_Arr=new Array(data.length);
                var woman_Arr=new Array(data.length);
                var man_Arr=new Array(data.length);
                // 前端要求格式：3个集合或数组
                // 角色信息:['学生','家长','教师']
                // 女生人数:[1,2,3]
                // 男生人数:[2,2,3]
                for(var i=0;i<data.length;i++){
                    rolename_Arr[i] = data[i].rolename;
                    man_Arr[i] = data[i].man;
                    woman_Arr[i] = data[i].woman;
                }
                //赋值
                optionBars.yAxis.data=rolename_Arr;
                optionBars.series[0].data=man_Arr;
                optionBars.series[1].data=woman_Arr;
            } else {
                layer.msg(resultData.msg);
            }
            // 使用刚指定的配置项和数据显示图表。
            echartsBars.setOption(optionBars);
        });

        /*
               饼状图
         */
        // 基于准备好的dom，初始化echarts实例
        var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
        // 指定图表的配置项和数据
        var optionPies = {
            title: {
                text: '角色人数统计',
                subtext: 'Role Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '角色人数',
                    type: 'pie',
                    radius: '60%',
                    data: [],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        //请求后端数据ajax
        $.getJSON("/statistics/findPie","",function (resultData) {//响应成功的回调函数
            if (resultData.code == 0) {
                optionPies.series[0].data = resultData.data;
            } else {
                layer.msg(resultData.msg);
            }
            // 使用刚指定的配置项和数据显示图表。
            echartsPies.setOption(optionPies);
        });


            /**
             * 柱状图
             */
            var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');

            var optionDataset = {
                legend: {},
                tooltip: {},

                dataset: {
                    dimensions: ['product', '2015', '2016', '2017'],
                    source: [
                        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
                        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
                        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
                        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
                    ]
                },
                xAxis: {type: 'category'},
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'}
                ]
            };

            echartsDataset.setOption(optionDataset);


            /**
             * 中国地图
             */
            var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');


            var optionMap = {
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },

                dataset: {
                    source: [
                        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                        ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                        ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                        ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                        ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                    ]
                },
                xAxis: {type: 'category'},
                yAxis: {gridIndex: 0},
                grid: {top: '55%'},
                series: [
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        label: {
                            formatter: '{b}: {@2012} ({d}%)'
                        },
                        encode: {
                            itemName: 'product',
                            value: '2012',
                            tooltip: '2012'
                        }
                    }
                ]
            };

            echartsMap.setOption(optionMap);


            // echarts 窗口缩放自适应
            window.onresize = function () {
                echartsBars.resize();
            }

    });
</script>
</body>
</html>
